<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户个人空间</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }
        
        /* 头部横幅样式 */
        .profile-header {
            position: relative;
            height: 300px;
            overflow: hidden;
        }
        
        .cover-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-actions {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 2;
        }
        
        /* 个人信息卡片样式 */
        .profile-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .avatar-container {
            position: absolute;
            bottom: -60px;
            left: 2rem;
            z-index: 2;
        }
        
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid white;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .profile-info {
            padding-top: 70px;
            padding-left: 150px;
        }
        
        .profile-name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        
        .profile-title {
            color: #6c757d;
            margin-bottom: 1rem;
        }
        
        .profile-bio {
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .profile-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 1rem;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-value {
            font-weight: 700;
            font-size: 1.25rem;
        }
        
        .stat-label {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        /* 导航样式 */
        .profile-nav {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
        
        .nav-tabs {
            border-bottom: none;
        }
        
        .nav-link {
            color: #6c757d;
            border: none;
            padding: 1rem 1.5rem;
            font-weight: 500;
            border-radius: 0;
        }
        
        .nav-link.active {
            color: #0d6efd;
            border-bottom: 3px solid #0d6efd;
            background-color: transparent;
        }
        
        .nav-link:hover {
            color: #0d6efd;
            background-color: #f8f9fa;
        }
        
        /* 内容区域样式 */
        .content-section {
            margin-bottom: 2rem;
        }
        
        .section-title {
            font-weight: 700;
            margin-bottom: 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #0d6efd;
        }
        
        /* 动态卡片样式 */
        .post-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .post-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .post-author {
            font-weight: 600;
        }
        
        .post-time {
            font-size: 0.85rem;
            color: #6c757d;
        }
        
        .post-content {
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .post-images {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 0.5rem;
            margin-bottom: 1rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .post-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .post-actions {
            display: flex;
            justify-content: space-between;
            padding-top: 0.5rem;
            border-top: 1px solid #eee;
        }
        
        .action-button {
            background: none;
            border: none;
            color: #6c757d;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            transition: all 0.2s ease;
        }
        
        .action-button:hover {
            background-color: #f1f5f9;
            color: #0d6efd;
        }
        
        /* 相册布局 */
        .album-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
        }
        
        .album-item {
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            aspect-ratio: 1/1;
            cursor: pointer;
        }
        
        .album-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .album-item:hover .album-image {
            transform: scale(1.05);
        }
        
        .album-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
            padding: 0.75rem;
            font-size: 0.85rem;
        }
        
        /* 侧边栏样式 */
        .sidebar-section {
            margin-bottom: 2rem;
        }
        
        .sidebar-title {
            font-weight: 600;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }
        
        .friend-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }
        
        .friend-item {
            text-align: center;
        }
        
        .friend-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 0.5rem;
        }
        
        .friend-name {
            font-size: 0.85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .tag-item {
            display: inline-block;
            background-color: #e9ecef;
            color: #495057;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.85rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .tag-item:hover {
            background-color: #0d6efd;
            color: white;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .profile-header {
                height: 200px;
            }
            
            .profile-info {
                padding-left: 1rem;
                text-align: center;
            }
            
            .avatar-container {
                left: 50%;
                transform: translateX(-50%);
            }
            
            .profile-stats {
                justify-content: center;
            }
        }
        
        @media (max-width: 576px) {
            .profile-header {
                height: 150px;
            }
            
            .avatar {
                width: 100px;
                height: 100px;
            }
            
            .nav-link {
                padding: 0.75rem;
                font-size: 0.9rem;
            }
            
            .album-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="container py-4">
        <!-- 头部横幅区域 -->
        <div class="profile-header mb-4 rounded-3 overflow-hidden">
            <img src="https://picsum.photos/id/1015/1600/800" alt="封面照片" class="cover-photo">
            <div class="profile-actions">
                <button class="btn btn-primary me-2">
                    <i class="fas fa-user-plus me-1"></i> 关注
                </button>
                <button class="btn btn-outline-light">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            <div class="avatar-container">
                <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="avatar">
            </div>
        </div>
        
        <!-- 个人信息卡片 -->
        <div class="profile-card">
            <div class="profile-info">
                <h1 class="profile-name">李明</h1>
                <div class="profile-title">产品设计师 @ 科技创新公司</div>
                <p class="profile-bio">
                    热爱设计与创意，专注于用户体验与交互设计。喜欢摄影、旅行和分享生活中的美好瞬间。
                    欢迎交流设计理念与创意想法！
                </p>
                
                <div class="profile-stats">
                    <div class="stat-item">
                        <div class="stat-value">248</div>
                        <div class="stat-label">动态</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">1.2k</div>
                        <div class="stat-label">粉丝</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">356</div>
                        <div class="stat-label">关注</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">4.8k</div>
                        <div class="stat-label">获赞</div>
                    </div>
                </div>
                
                <div>
                    <span class="me-3"><i class="fas fa-map-marker-alt text-secondary me-1"></i> 北京</span>
                    <span class="me-3"><i class="fas fa-link text-secondary me-1"></i> <a href="#" class="text-primary">个人网站</a></span>
                    <span><i class="fas fa-calendar text-secondary me-1"></i> 加入于 2020年3月</span>
                </div>
            </div>
        </div>
        
        <!-- 导航选项卡 -->
        <div class="profile-nav">
            <ul class="nav nav-tabs justify-content-start">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#posts">
                        <i class="fas fa-home me-1"></i> 动态
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#photos">
                        <i class="fas fa-images me-1"></i> 相册
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#collections">
                        <i class="fas fa-bookmark me-1"></i> 收藏
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#friends">
                        <i class="fas fa-users me-1"></i> 好友
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">
                        <i class="fas fa-info-circle me-1"></i> 关于
                    </a>
                </li>
            </ul>
        </div>
        
        <div class="row">
            <!-- 主内容区域 -->
            <div class="col-lg-8">
                <!-- 动态发布区域 -->
                <div class="post-card">
                    <div class="d-flex gap-3">
                        <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="post-avatar">
                        <div class="flex-grow-1">
                            <textarea class="form-control" placeholder="分享你的想法..." rows="3" style="border-radius: 20px;"></textarea>
                            <div class="d-flex justify-content-between mt-3">
                                <div class="d-flex gap-2">
                                    <button class="btn btn-outline-secondary rounded-pill">
                                        <i class="fas fa-image text-primary"></i>
                                    </button>
                                    <button class="btn btn-outline-secondary rounded-pill">
                                        <i class="fas fa-video text-danger"></i>
                                    </button>
                                    <button class="btn btn-outline-secondary rounded-pill">
                                        <i class="fas fa-smile text-warning"></i>
                                    </button>
                                    <button class="btn btn-outline-secondary rounded-pill">
                                        <i class="fas fa-map-marker-alt text-success"></i>
                                    </button>
                                </div>
                                <button class="btn btn-primary rounded-pill px-4">发布</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 动态列表 -->
                <div class="content-section" id="posts">
                    <h2 class="section-title">最新动态</h2>
                    
                    <!-- 带多图的动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="post-avatar">
                            <div>
                                <div class="post-author">李明</div>
                                <div class="post-time">今天 10:23</div>
                            </div>
                        </div>
                        <div class="post-content">
                            周末去了郊外的创意园区，发现了很多有趣的设计和艺术装置。分享一些照片，大家觉得怎么样？
                        </div>
                        <div class="post-images">
                            <img src="https://picsum.photos/id/1048/600/400" alt="创意园区照片1" class="post-image">
                            <img src="https://picsum.photos/id/1025/600/400" alt="创意园区照片2" class="post-image">
                            <img src="https://picsum.photos/id/1060/600/400" alt="创意园区照片3" class="post-image">
                        </div>
                        <div class="post-actions">
                            <button class="action-button">
                                <i class="far fa-thumbs-up"></i>
                                <span>128</span>
                            </button>
                            <button class="action-button">
                                <i class="far fa-comment"></i>
                                <span>32</span>
                            </button>
                            <button class="action-button">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 带单图的动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="post-avatar">
                            <div>
                                <div class="post-author">李明</div>
                                <div class="post-time">昨天 16:45</div>
                            </div>
                        </div>
                        <div class="post-content">
                            最新完成的一个产品设计项目，经过三个月的努力终于上线了。感谢团队的协作和支持！
                        </div>
                        <div class="post-images" style="grid-template-columns: 1fr;">
                            <img src="https://picsum.photos/id/180/800/500" alt="产品设计图" class="post-image" style="height: auto;">
                        </div>
                        <div class="post-actions">
                            <button class="action-button">
                                <i class="far fa-thumbs-up"></i>
                                <span>256</span>
                            </button>
                            <button class="action-button">
                                <i class="far fa-comment"></i>
                                <span>48</span>
                            </button>
                            <button class="action-button">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 纯文字动态 -->
                    <div class="post-card">
                        <div class="post-header">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="post-avatar">
                            <div>
                                <div class="post-author">李明</div>
                                <div class="post-time">3天前</div>
                            </div>
                        </div>
                        <div class="post-content">
                            最近在学习UI动效设计，发现微小的动画细节能极大提升用户体验。分享一些学习心得：
                            <br><br>
                            1. 动画应该有目的性，而不仅仅是装饰
                            <br>
                            2. 保持一致的动效语言
                            <br>
                            3. 注意动画的时长和节奏
                            <br>
                            4. 不要过度使用动画，以免分散注意力
                            <br><br>
                            大家有什么好的动效设计资源推荐吗？
                        </div>
                        <div class="post-actions">
                            <button class="action-button">
                                <i class="far fa-thumbs-up"></i>
                                <span>189</span>
                            </button>
                            <button class="action-button">
                                <i class="far fa-comment"></i>
                                <span>64</span>
                            </button>
                            <button class="action-button">
                                <i class="far fa-share-square"></i>
                                <span>分享</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 相册区域 -->
                <div class="content-section" id="photos" style="display: none;">
                    <h2 class="section-title">我的相册</h2>
                    
                    <div class="album-grid">
                        <div class="album-item">
                            <img src="https://picsum.photos/id/10/300/300" alt="旅行照片" class="album-image">
                            <div class="album-overlay">旅行</div>
                        </div>
                        <div class="album-item">
                            <img src="https://picsum.photos/id/20/300/300" alt="设计作品" class="album-image">
                            <div class="album-overlay">设计作品</div>
                        </div>
                        <div class="album-item">
                            <img src="https://picsum.photos/id/30/300/300" alt="美食照片" class="album-image">
                            <div class="album-overlay">美食</div>
                        </div>
                        <div class="album-item">
                            <img src="https://picsum.photos/id/40/300/300" alt="城市风光" class="album-image">
                            <div class="album-overlay">城市</div>
                        </div>
                        <div class="album-item">
                            <img src="https://picsum.photos/id/50/300/300" alt="自然风景" class="album-image">
                            <div class="album-overlay">自然</div>
                        </div>
                        <div class="album-item">
                            <img src="https://picsum.photos/id/60/300/300" alt="活动照片" class="album-image">
                            <div class="album-overlay">活动</div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4">
                        <button class="btn btn-outline-primary">查看更多相册</button>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <!-- 个人标签 -->
                <div class="profile-card sidebar-section">
                    <h3 class="sidebar-title">个人标签</h3>
                    <div>
                        <span class="tag-item">产品设计</span>
                        <span class="tag-item">UI/UX</span>
                        <span class="tag-item">摄影</span>
                        <span class="tag-item">旅行</span>
                        <span class="tag-item">创意</span>
                        <span class="tag-item">美食</span>
                        <span class="tag-item">阅读</span>
                        <span class="tag-item">电影</span>
                    </div>
                </div>
                
                <!-- 好友列表 -->
                <div class="profile-card sidebar-section">
                    <h3 class="sidebar-title">
                        好友 (12)
                        <a href="#" class="float-end text-primary text-sm">查看全部</a>
                    </h3>
                    <div class="friend-list">
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/65/100/100" alt="好友头像" class="friend-avatar">
                            <div class="friend-name">王小红</div>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/66/100/100" alt="好友头像" class="friend-avatar">
                            <div class="friend-name">张伟</div>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/67/100/100" alt="好友头像" class="friend-avatar">
                            <div class="friend-name">刘芳</div>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/68/100/100" alt="好友头像" class="friend-avatar">
                            <div class="friend-name">陈明</div>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/69/100/100" alt="好友头像" class="friend-avatar">
                            <div class="friend-name">赵丽</div>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/70/100/100" alt="好友头像" class="friend-avatar">
                            <div class="friend-name">杨光</div>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐关注 -->
                <div class="profile-card sidebar-section">
                    <h3 class="sidebar-title">
                        推荐关注
                        <a href="#" class="float-end text-primary text-sm">换一批</a>
                    </h3>
                    <div class="friend-list">
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/71/100/100" alt="推荐用户头像" class="friend-avatar">
                            <div class="friend-name">黄子琪</div>
                            <button class="btn btn-sm btn-outline-primary mt-1">关注</button>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/72/100/100" alt="推荐用户头像" class="friend-avatar">
                            <div class="friend-name">刘强</div>
                            <button class="btn btn-sm btn-outline-primary mt-1">关注</button>
                        </div>
                        <div class="friend-item">
                            <img src="https://picsum.photos/id/73/100/100" alt="推荐用户头像" class="friend-avatar">
                            <div class="friend-name">孙梦</div>
                            <button class="btn btn-sm btn-outline-primary mt-1">关注</button>
                        </div>
                    </div>
                </div>
                
                <!-- 活跃话题 -->
                <div class="profile-card sidebar-section">
                    <h3 class="sidebar-title">活跃话题</h3>
                    <div>
                        <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <div>
                                <div class="font-weight-medium">2023设计趋势</div>
                                <div class="text-sm text-secondary">1.2k人参与</div>
                            </div>
                            <span class="badge bg-primary">热门</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-2 border-bottom">
                            <div>
                                <div class="font-weight-medium">用户体验设计</div>
                                <div class="text-sm text-secondary">856人参与</div>
                            </div>
                            <span class="badge bg-secondary">讨论</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center py-2">
                            <div>
                                <div class="font-weight-medium">创意摄影技巧</div>
                                <div class="text-sm text-secondary">542人参与</div>
                            </div>
                            <span class="badge bg-secondary">讨论</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 导航选项卡切换
            const navLinks = document.querySelectorAll('.nav-link');
            const contentSections = document.querySelectorAll('.content-section');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    navLinks.forEach(l => l.classList.remove('active'));
                    contentSections.forEach(s => s.style.display = 'none');
                    
                    // 添加当前激活状态
                    this.classList.add('active');
                    const targetId = this.getAttribute('href').substring(1);
                    document.getElementById(targetId).style.display = 'block';
                });
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-button i.far.fa-thumbs-up');
            likeButtons.forEach(button => {
                button.parentElement.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countSpan = this.querySelector('span');
                    
                    if (icon.classList.contains('far')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        countSpan.textContent = parseInt(countSpan.textContent) + 1;
                        this.style.color = '#0d6efd';
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        countSpan.textContent = parseInt(countSpan.textContent) - 1;
                        this.style.color = '';
                    }
                });
            });
        });
    </script>
</body>
</html>
    